<template>
  <el-card>
    <!-- 查询表单 -->
    <el-form :inline="true">
      <el-row type="flex" justify="space-between">
        <el-form-item label="关键字" size="small">
          <el-input v-model="queryData.keyword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="clearHandler">清除</el-button>
          <el-button size="small" type="primary" @click="initData">搜索</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <el-tag style="width: 100%; margin-bottom: 10px" type="info">
      <i class="el-icon-warning-outline" style="font-size: 14px"></i>
      {{ `${count}条记录` }}
    </el-tag>

    <!-- 组题表格 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="编号" align="center" width="200px"></el-table-column>
      <el-table-column prop="questionType" label="题型" align="center"></el-table-column>
      <el-table-column prop="questionIDs" label="题目编号" width="200px" align="center">
        <template slot-scope="{row}"><span  @click='clickHandler' style="color:blue" >{{row.questionIDs}}</span>  </template>
      </el-table-column>
      <el-table-column prop="addTime" label="录入时间" width="200px" align="center"></el-table-column>
      <el-table-column prop="totalSeconds" label="答题时间" align="center"></el-table-column>
      <el-table-column prop="accuracyRate" label="正确率" align="center"></el-table-column>
      <el-table-column prop="userName" label="录入人" align="center"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button
            circle
            size="small"
            icon="el-icon-delete"
            type="danger"
            @click="delHandler(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-row type="flex" justify="end" style="margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </el-row>

    <!-- 弹窗组件  -->
    <questions-info ref="qi"></questions-info>
  </el-card>
</template>

<script>
// import { getRandomsListApi } from "@/api/xxd-api";
import axios from 'axios'
import QuestionsInfo from './components/questions-info.vue';
export default {
  name: "ListPage",
  components:{
    QuestionsInfo
  },
  data() {
    return {
      queryData: {
        pagesize: 10,
        page: 1,
        keyword:''
      },
      list: [],
      count: 0,
      // showDialog:false
    };
  },
  created() {
    this.initData();        
  },
  methods: {
    async initData() {
      // let { items, counts } = await getRandomsListApi(this.queryData);
      let res = await axios.post('http://localhost:8080/questions/randoms/', this.queryData)
      // console.log(res,res.data.data.counts);
      this.list = res.data.data.tableData
      this.count = res.data.data.counts
      // console.log(this.list, "------------组题列表");
      // console.log(this.count, "-----------总数");
      // console.log('this.list',this.list)

    },
    // 清除
    clearHandler(){
      this.queryData.keyword =''
      this.initData()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryData.pagesize = val;
      this.initData()
    },
    handleCurrentChange(val) {
      console.log(`当前 ${val} 页`);
      this.queryData.page = val;
      this.initData()
    },

    async delHandler(id) {
      await this.$confirm("确定删除吗？");
      await axios.post('http://localhost:8080/questions/randoms/delete',{id:id})
      this.$message.success('删除成功')
      if (this.queryData.page !== 1 && this.list.length === 1) {
        this.queryData.page--;
      }
      this.initData()
       
    },
    clickHandler(){
      console.log(this.$refs.qi)
      this.$refs.qi.showDialog = true
    }
  },
};
</script>

<style lang="scss" scoped>

</style>
